<template>
    <a-form :form="form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="商品编号">
            <a-input v-decorator="noRule" :disabled="!editModel"/>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="商品名称">
            <a-input v-decorator="titleRule" :disabled="!editModel"/>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="售价">
            <a-input-number
                :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                v-decorator="priceRule"
                :disabled="!editModel"
                style="width:130px"
            />元
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="使用年限" style="margin-bottom:0;">
            <a-input-number
                style="width:130px"
                :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                v-decorator="durationRule"
                :disabled="!editModel"
            />
            <a-form-item style="display:inline-block">
                <a-select style="width: 60px" :disabled="!editModel" v-decorator="durationUnitRule">
                    <a-select-option value="y">年</a-select-option>
                    <a-select-option value="M">月</a-select-option>
                    <a-select-option value="w">周</a-select-option>
                    <a-select-option value="d">天</a-select-option>
                    <a-select-option value="s">秒</a-select-option>
                </a-select>
            </a-form-item>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="库存">
            <a-input-number v-decorator="stockRule" :disabled="!editModel" style="width:130px"/>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="规格">
            <a-textarea :autosize="{minRows: 2, maxRows: 10}" v-decorator="['sku']" :disabled="!editModel"></a-textarea>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="产品描述">
            <a-textarea :autosize="{minRows: 2, maxRows: 10}" v-decorator="['description']" :disabled="!editModel"></a-textarea>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="备注">
            <a-input v-decorator="['remarks']" :disabled="!editModel"/>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="状态">
            <a-select style="width: 130px" :disabled="!editModel" v-decorator="stateRule">
                <a-select-option :value="1">在售</a-select-option>
                <a-select-option :value="2">下架</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item v-bind="tailFormItemLayout" v-if="editModel">
            <a-button type="primary" html-type="submit" v-if="!modifyModel">添加商品</a-button>
            <a-button @click="backHandler">返回</a-button>
            <a-button type="primary" html-type="submit" v-if="modifyModel">更新商品</a-button>
        </a-form-item>
        <a-form-item v-bind="tailFormItemLayout" v-if="!editModel">
            <a-button @click="backHandler">返回</a-button>
            <a-button type="primary" @click="modifyHandler">修改</a-button>
        </a-form-item>
    </a-form>
</template>
<script>
import { Modal } from 'ant-design-vue';
import moment from 'moment';
export default {
    data() {
        return {
            editModel: false,
            modifyModel: false,
            currentProduct: {},
            productId: '',
            formItemLayout: {
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    xs: {
                        span: 24,
                        offset: 0
                    },
                    sm: {
                        span: 16,
                        offset: 8
                    }
                }
            },
            noRule: [
                'no',
                {
                    rules: [{ required: true, message: '请输入商品编号' }]
                }
            ],
            titleRule: [
                'title',
                {
                    rules: [{ required: true, message: '请输入商品名称' }]
                }
            ],
            priceRule: [
                'price',
                {
                    initialValue: 0,
                    rules: [{ required: true, message: '请输入售价' }, { pattern: /^[0-9]*$/, message: '请输入数字' }]
                }
            ],
            durationRule: [
                'duration',
                {
                    initialValue: 1,
                    rules: [{ required: true, message: '请输入使用年限' }]
                }
            ],
            durationUnitRule: [
                'durationUnit',
                {
                    initialValue: 'y'
                }
            ],
            stockRule: [
                'stock',
                {
                    initialValue: 0,
                    rules: [{ required: true, message: '请输入库存数量' }]
                }
            ],
            stateRule: [
                'state',
                {
                    initialValue: 1
                }
            ]
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this);
    },
    created() {
        this.productId = this.$route.query.id;
        switch (this.$route.name) {
            case 'AddProduct':
                this.editModel = true;
                break;
            case 'ModifyProduct':
                this.editModel = true;
                this.modifyModel = true;
                break;
            case 'ProductDetail':
                this.editModel = false;
                break;
            default:
                this.editModel = false;
        }
        if (this.productId) {
            this.$store.dispatch('getProductById', this.productId).then(product => {
                this.currentProduct = product;
                this.form.setFieldsValue({
                    no: this.currentProduct.no,
                    title: this.currentProduct.title,
                    price: this.currentProduct.price,
                    duration: this.currentProduct.duration,
                    durationUnit: this.currentProduct.durationUnit,
                    stock: this.currentProduct.stock,
                    sku: this.currentProduct.sku,
                    description: this.currentProduct.description,
                    remarks: this.currentProduct.remarks,
                    state: this.currentProduct.state
                });
            });
        }
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    if (this.modifyModel) {
                        Object.assign(this.currentProduct, values);
                        this.$store
                            .dispatch('updateProduct', this.currentProduct)
                            .then(res => {
                                Modal.success({
                                    title: '更新成功',
                                    onOk: () => {
                                        this.$router.replace({
                                            name: 'ProductList'
                                        });
                                    }
                                });
                            })
                            .catch(reason => {
                                console.log(reason);
                                Modal.error({
                                    title: '更新失败',
                                    onOk: () => {
                                        this.$router.replace({
                                            name: 'ProductList'
                                        });
                                    }
                                });
                            });
                    } else {
                        this.$store
                            .dispatch('addProduct', values)
                            .then(res => {
                                Modal.success({
                                    title: '添加成功',
                                    onOk: () => {
                                        this.$router.replace({
                                            name: 'ProductList'
                                        });
                                    }
                                });
                            })
                            .catch(reason => {
                                Modal.error({
                                    title: '添加失败',
                                    onOk: () => {
                                        this.$router.replace({
                                            name: 'ProductList'
                                        });
                                    }
                                });
                            });
                    }
                }
            });
        },
        backHandler() {
            this.$router.go(-1);
        },
        modifyHandler() {
            this.editModel = true;
            this.modifyModel = true;
        }
    }
};
</script>
